<template>
  <div>
    <h1>hello vue</h1>
  </div>
</template>

<script>
import { asyncRoutes } from '@/router'
export default {
  created() {
    // 获取模块中变量的语法：this.$store.state.模块名.变量名
    const menus = this.$store.state.user.userInfo.roles.menus
    this.filterRoutes(menus)
  },
  methods: {
    filterRoutes(menus) {
      // 1、权限标识符数据集合menus
      // 2、动态路由的集合
      // 筛选原理：当动态路由中的name属性的值，
      // 存在在menus数组中的时候，说明该路由是具有访问权限的路由。
      const newRoutes = asyncRoutes.filter(item => {
        return menus.includes(item.name)
      })
      // newRoutes 即为筛选出来具有访问权限的路由
      return newRoutes
    }
  }
}
</script>

<style scoped>

</style>
